<template>
  <svg
    class="yindu-icon"
    width="20"
    height="20"
    viewBox="0 0 20 20"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M15.8333 3.33354H4.16667V16.6669H15.8333V3.33354ZM2.5 2.49337C2.5 2.03691 2.87291 1.66687 3.33208 1.66687H16.6664C17.1266 1.66687 17.4997 2.03997 17.4998 2.5002L17.5 17.494C17.5 17.9576 17.1292 18.3335 16.6722 18.3335H3.32783C2.87063 18.3335 2.5 17.9541 2.5 17.507V2.49337ZM9.41075 10.9346L12.9462 7.3991L14.1247 8.57762L9.41075 13.2916L6.16984 10.0508L7.34835 8.8722L9.41075 10.9346Z"
    />
  </svg>
</template>

<script setup lang="ts">
type Props = {
  fill?: string;
};

const props = withDefaults(defineProps<Props>(), {
  fill: "#3D88F2",
});

const fillColor = computed(() => {
  return props.fill;
});
</script>
<style scoped lang="less">
.yindu-icon {
  & path,
  & polygon {
    fill: v-bind(fillColor);
  }
}
</style>
